@mixin tooltip($_tooltip_text, $_position: "BOTTOM") {
    &:hover {
        &::before,
        &::after {
            opacity: 1;
            transition: _transition("all", "normal", "normal");
        }
    }

    &::before,
    &::after {
        opacity: 0;
        position: absolute;
        background: _color("secondary");
        transition: _transition("all", "normal");
        margin: 0 !important;
        pointer-events: none;

    }

    &::before {
        content: "Loading ...";
        padding: 7px 10px;
        white-space: nowrap;
        text-align: center;
        z-index: 9998;
        border-radius: 2px;
        box-shadow: 1px 2px 4px 0 rgba(40, 43, 45, 0.7);
        text-transform: uppercase;
        text-indent: 0;

        @include text(10px, _color("primary", g), _weight("extrabold"));
    }

    &::after {
        width: 0;
        height: 0;
        content: "Arrow";
        text-indent: -50000px;
        z-index: 9999;
        border-style: solid;
        border-width: 0 8px 8px 8px;
        border-color: transparent transparent _color("secondary") transparent;
        background: transparent;
        top: 25px;
    }

    @if ($_position == "BOTTOM") {
        &::before {
            bottom: -36px;
            left: -10px;
        }

        &::after {
            bottom: -18px;
            left: 5px;
        }
    } @else if ($_position == "LEFT"){
        &::before {
            top: 3px;
            right: 53px;
        }

        &::after {
            top: 12px;
            left: -9px;
            transform: rotate(90deg);
        }
    } @else if ($_position == "BOTTOM-LEFT"){
        &::before {
            bottom: -36px;
            right: -10px;
        }

        &::after {
            bottom: -18px;
            right: 5px;
        }
    }

    &::before {
        content: $_tooltip_text;
    }

}
